<template>
    <view>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center weishengxinxi_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub weishengxinxi_fd0_0'>
                    <view class='flex flex-wrap align-center weishengxinxi_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  weishengxinxi_fd0_0_c0_c0'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='weishengxinxi_fd0_0_c1_c0'>卫生信息</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end weishengxinxi_fd0_0_c0'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex benben-flex-layout flex-wrap align-center weishengxinxi_flex_1">
                <view class='flex flex-wrap align-center weishengxinxi_fd1_0'>
                    <view>
                        <benben-flex-tabs class-name='weishengxinxi_benbenTabsfd1_0_c0' v-model="tabsTypefd1_0_c0" ref="benben_tabsfd1_0_c0" select-mark="benben_tabsfd1_0_c0" key="benben_tabsfd1_0_c0" :open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd1_0_c0">

                            <scroll-view @scroll="tabsInfofd1_0_c0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0_c0" class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left.sync="tabsInfofd1_0_c0.moveX" scroll-with-animation="all .3s ease">
                                <view class="benben-tabs-content" id="benben_tabsfd1_0_c0-content">
                                    <view id="benben_tabsfd1_0_c0-title" class="benben-tabs-title flex flex align-center justify-around">
                                        <view :class="{ 'checkTitlefd1_0_c0': tabsTypefd1_0_c0 == '1', 'flex flex-wrap align-center huiseiw': true }" @tap="tabsTypefd1_0_c0 = '1'" :id="`benben_tabsfd1_0_c0-title-item-${'1'}`">

                                            <text>智能信息</text>

                                        </view>
                                        <view :class="{ 'checkTitlefd1_0_c0': tabsTypefd1_0_c0 == '2', 'flex flex-wrap align-center huiseiw': true }" @tap="tabsTypefd1_0_c0 = '2'" :id="`benben_tabsfd1_0_c0-title-item-${'2'}`">

                                            <text>普通信息</text>

                                        </view>
                                    </view>
                                    <view :style="{ left: tabsInfofd1_0_c0.lineleft, maxWidth: tabsInfofd1_0_c0.lineWidth ,}" id="benben_tabsfd1_0_c0-line" class="benben-tabs-line flex benben-flex-tabs-line weishengxinxi_linefd1_0_c0"></view>
                                </view>
                            </scroll-view>

                        </benben-flex-tabs>

                    </view>
                </view>
                <view class='flex flex-wrap align-center weishengxinxi_fd1_1' v-if="tabsTypefd1_0_c0 == '1'">
                    <view class='flex flex-wrap align-center weishengxinxi_fd1_1_c0'>
                        <text class='weishengxinxi_fd1_1_c0_c0'>设备1</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
                        <text class='weishengxinxi_fd1_1_c1_c0'>设备类型：</text>
                        <text class='weishengxinxi_fd1_1_c1_c1'>楼道</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
                        <text class='weishengxinxi_fd1_1_c1_c0'>设备编号：</text>
                        <text class='weishengxinxi_fd1_1_c1_c1'>543646</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
                        <text class='weishengxinxi_fd1_1_c1_c0'>设备名称：</text>
                        <text class='weishengxinxi_fd1_1_c1_c1'>厨房智能油烟机</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
                        <text class='weishengxinxi_fd1_1_c1_c0'>安装日期：</text>
                        <text class='weishengxinxi_fd1_1_c1_c1'>2024-09-29</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
                        <text class='weishengxinxi_fd1_1_c1_c0'>有效期：</text>
                        <text class='weishengxinxi_fd1_1_c1_c1'>2024-09-29</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
                        <text class='weishengxinxi_fd1_1_c1_c0'>达标状态：</text>
                        <text class='weishengxinxi_fd1_1_c1_c1'>达标</text>
                    </view>
                    <view class='flex flex-wrap align-center weishengxinxi_fd1_0'>
                        <text class='weishengxinxi_fd1_1_c7_c0'>图片：</text>
                        <view class='flex flex-wrap align-center weishengxinxi_fd1_0'>
                            <view class='flex flex-wrap align-center weishengxinxi_fd1_1_c7_c1_c0'>
                            </view>
                        </view>
                    </view>
                </view>
				
				<view class='flex flex-wrap align-center weishengxinxi_fd1_1' v-if="tabsTypefd1_0_c0 == '2'">
				    <view class='flex flex-wrap align-center weishengxinxi_fd1_1_c0'>
				        <text class='weishengxinxi_fd1_1_c0_c0'>设备1</text>
				    </view>
				    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
				        <text class='weishengxinxi_fd1_1_c1_c0'>类型：</text>
				        <text class='weishengxinxi_fd1_1_c1_c1'>楼道</text>
				    </view>
				    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
				        <text class='weishengxinxi_fd1_1_c1_c0'>名称：</text>
				        <text class='weishengxinxi_fd1_1_c1_c1'>厨房智能油烟机</text>
				    </view>
				    <view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
				        <text class='weishengxinxi_fd1_1_c1_c0'>达标状态：</text>
				        <text class='weishengxinxi_fd1_1_c1_c1'>达标</text>
				    </view>
					<view class='flex flex-wrap align-center justify-between weishengxinxi_fd1_1_c1'>
					    <text class='weishengxinxi_fd1_1_c1_c0'>用途：</text>
					    <text class='weishengxinxi_fd1_1_c1_c1'>达标</text>
					</view>
				    <view class='flex flex-wrap align-center weishengxinxi_fd1_0'>
				        <text class='weishengxinxi_fd1_1_c7_c0'>图片：</text>
				        <view class='flex flex-wrap align-center weishengxinxi_fd1_0'>
				            <view class='flex flex-wrap align-center weishengxinxi_fd1_1_c7_c1_c0'>
				            </view>
				        </view>
				    </view>
				</view>
            </view>
            <!---flex布局flex布局结束-->
        </view>
    </view>
</template>
<script>
    export default {
        components: {},


        data() {
            return {
                "tabsInfofd1_0_c0": {
                    lineleft: '',
                    lineWidth: '',
                    moveX: 0,
                    scrollX: 0,
                    PageScrollX: 0
                },
                "tabsTypefd1_0_c0": "1"
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {

        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {

        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: #F8F8F8;
        background-size: 100% auto;
    }
	
	.huiseiw{
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}

    .weishengxinxi_flex_0 {
        background: #fff;
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .weishengxinxi_fd0_0_c1_c0 {
        font-size: 36rpx;
        font-weight: 500;
        color: #333333;
        line-height: 50rpx;
    }

    .weishengxinxi_fd0_0_c0_c0 {
        font-size: 36rpx;
        color: #333;
    }

    .weishengxinxi_fd0_0_c0 {
        width: 120rpx;
    }

    .weishengxinxi_fd0_0 {
        padding: 0rpx 32rpx 0rpx 32rpx;
    }

    .weishengxinxi_flex_1 {
        padding: 0rpx 24rpx 0rpx 24rpx;
    }

    .weishengxinxi_fd1_1_c7_c1_c0 {
        border: 1px solid #eee;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        width: 210rpx;
        height: 210rpx;
        margin: 24rpx 12rpx 0rpx 0rpx;
    }

    .weishengxinxi_fd1_1_c7_c0 {
        width: 100%;
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }

    .weishengxinxi_fd1_1_c1_c1 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 400;
    }

    .weishengxinxi_fd1_1_c1_c0 {
        color: #999999;
        font-size: 28rpx;
        font-weight: 400;
    }

    .weishengxinxi_fd1_1_c1 {
        width: 100%;
        margin: 0rpx 0rpx 24rpx 0rpx;
    }

    .weishengxinxi_fd1_1_c0_c0 {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
    }

    .weishengxinxi_fd1_1_c0 {
        border-bottom: 1px solid #eee;
        width: 100%;
        padding: 0rpx 0rpx 32rpx 0rpx;
        margin: 0rpx 0rpx 32rpx 0rpx;
    }

    .weishengxinxi_fd1_1 {
        background: #FFFFFF;
        margin: 12rpx 0rpx 0rpx 0rpx;
        width: 100%;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 32rpx 24rpx 32rpx 24rpx;
    }

    .weishengxinxi_linefd1_0_c0 {
        background: #FC5F80;
        width: 30rpx;
        height: 8rpx;
        top: 75rpx;
        background-size: 100% auto !important;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
    }

    .checkTitlefd1_0_c0 {
        font-weight: 500 !important;
        font-size: 32rpx !important;
        color: #333 !important;
    }

    ::v-deep .weishengxinxi_benbenTabsfd1_0_c0 {
        width: 750rpx;
        height: 90rpx;
        white-space: nowrap;
        text-align: center;
    }

    .weishengxinxi_fd1_0 {
        width: 100%;
    }
</style>